<!-- 区域的组件 -->
<template>

<el-row >
	<div style="margin-left: 30px">
		<el-button type="primary" :disabled="widget.options.disabled" @click.native="handleAddRow()">添加</el-button>
		<el-button type="primary"  :disabled="widget.options.disabled" @click="dialogFormVisible = true" >导出数据</el-button>
	</div>

    <el-dialog title="导出的列" :visible.sync="dialogFormVisible" :append-to-body="true"   :close-on-click-modal="false">
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(key,index) in columns" :label="key.model" :key="key.model" checked>{{key.name}} </el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">

            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"@click.native="confirmDialog()"  >确 定</el-button>
        </div>
    </el-dialog>
	<div v-for="(column1,index) in tableData">
		<el-button v-if="index>0" class="el-icon-delete-solid" type="danger" @click.native="handleRemove(index)">删除</el-button>
		<div v-for="(column,p_index) in columns" :key="column.key" :class="{'el-col-24': columns.length%2!=0&&p_index==columns.length-1}">

		<el-col :span="column.options !== undefined  &&  column.options.span" class="drag-widget field-item">
<!--			<label v-if="column.type != 'divider'" style="min-width:70px;float: left;"  :class="{'is_req': column.options.required,'display':'block'}"> {{column.name}}: </label>-->
				<div v-if="column">
					<div v-if="column.model" >
						<el-form-item     :class="{'is_req': column.options.required,'display':'block'}"
										 :label="getLable(column)"
                              v-if="column.options.show == true"
										 :prop="widget.model+'.'+index+'.'+column.model"
										 :rules="column.rules?column.rules:[]"
						>
							<GenerateElementItem
									:blanks="blanks" is-table='block'
												 :path="widget.model+'.'+index+'.'+column.model"
												 v-model="value[index][column.model]"
												 :models_temp="models_temp"
												 :widget="column"
												 :remote="remote"
												 :models.sync="dataModels"
												 :strutAll="strutAll"
												 :index="2"
							>

							</GenerateElementItem>
						</el-form-item>
					</div>
				</div>
		</el-col>
		</div>
	</div>





</el-row>

</template>

<script>
	import {importXLSX } from  '../router/xlsx.js'
	import {verification } from  '../router/verification.js'
	import {getLable,guid} from '../js/formUtils.js'

	function isInArray(arr,value){

        for(var i = 0; i < arr.length; i++){
            if(value === arr[i]){
                return true;
            }
        }
        return false;
    }
	export default {

		components: {
			GenerateElementItem: () => import('../GenerateElementItem.vue')
		},
		props: ['columns', 'value', 'models', 'remote', 'blanks','models_temp','widget','strutAll','data','path'],
		data () {

            //console.log(this.columns[0].options.defaultValue);
			return {
				tableData: this.value,
				dataModels: this.models,
                checkedCities: [],
                dialogVisible: false,
                dialogFormVisible: false
			}
		},
		created(){
            for(var i=0;i<this.columns.length;i++){
            	if(this.columns[i].rules) {
					for (var j = 0; j < this.columns[i].rules.length; j++) {
						this.columns[i].rules[j].validator=this.validatePass;
					}
				}
			}
		},
		methods: {
			getLable:function(element){
				return getLable(element)
			},
			validatePass(rule, info, callback) {
				verification(rule, info, callback)
		},
			handleAddRow () {
// 				debugger
// 				let script = document.createElement('script')
// 				script.type = 'text/javascript'
// 				script.text = `
// 	console.log(111)
// `
// 				document.getElementsByTagName('head')[0].appendChild(script)
                var dataModels=this.dataModels
				let item = {}
				if (this.columns !== undefined    ){
					if (this.columns.length > 0){
						for (let i = 0; i < this.columns.length; i++) {
							item[this.columns[i].model] = ""
							item["ID_"] = guid()
						}


					}
				}
				this.tableData.push(item);


			},
			handleRemove (index) {
				this.tableData.splice(index, 1)
			},
             isInArray(arr,value){
                 for(var i = 0; i < arr.length; i++){
                     if(value === arr[i]){
                         return true;
                     }
                 }
                 return false;
          },
			handleImport(){

			},
            handleClose(){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
			}
			,
            handleCheckedCitiesChange(value) {
                this.checkedCities=value;

            },
            exportData(){
                this.dialogFormVisible = false;
            }
			,
            confirmDialog(value) {
                this.dialogFormVisible=false;
               var  checkedCities= this.checkedCities
				if (checkedCities.length==0){
					return
				}
                var title=[];
                var columns=  this.columns;
                for (var i = 0; i <columns.length ; i++) {
                  var column=   columns[i]
                    var exist= isInArray(checkedCities,column.model);
                    if(exist){
                        title.push(column.name)
                    }
                }
                var items=[];
                for(let i=0;i<this.checkedCities.length;i++){
                	var item=[];
                    for(let j=0;j<this.tableData.length;j++){
						item.push(this.tableData[j][this.checkedCities[i]])
                    }
					items[this.checkedCities[i]]=item;
                }
			 var 	_data=[];
				_data.push(title)


				for(let j=0;j<this.tableData.length;j++){
				 var t=	this.tableData[j];
				 var td=[];
					for(let i=0;i<this.checkedCities.length;i++){
						 var d=	t[checkedCities[i]]
					td.push(d)
					}
					_data.push(td)
				}
				importXLSX(_data,this.widget.name)
            }


			/*
                        handleRemove (index) {
                            this.tableData.splice(index, 1)
                        }
                    },
                    mounted () {
                        /*if (this.tableData) {
                            if ( this.tableData!== undefined  ) {
                                if (this.tableData.length==0){
                                    this.handleAddRow();
                                }
                            }

                        }*/

		},
		watch: {
			/*value (val) {
				this.tableData = val
			},
			tableData (val) {
				this.$emit('input', val)
			},
			dataModels: {
				deep: true,
				handler (val) {
					this.$emit('update:models', val)
				}
			},
			models: {
				deep: true,
				handler (val) {
					this.dataModels = val
				}
			}*/
		},

	}
</script>

<style lang="scss" scoped>
	.row-bd{
		border: 1px solid #EBEEF5;
		padding-top:12px;
	}
	.addRow{
		display: block !important;
		margin-top: 18% !important;
	}
	.is_req {
		content: '*';
		color: #f56c6c;
		margin-right: 4px;
	}
</style>


